<template>
  <view class="main">
    <NavBar :arrow="false" title="供需广场" :fixed="true" right-text="筛选"
      @onClickRight="$goUrl(`/pages/forSale/pages/select`)" />

    <van-sticky :offset-top="0">
      <view class="search-box">
        <van-search v-model="query.search" background="transparent" placeholder="搜索" shape="round" @search="search" />
      </view>
      <view class="tab dispaly-just-between" :style="{ 'background-color': tabBg }">
        <Tabs :tab-list="tabList" @change="tabChange" label="dictLabel" />
        <!-- <view @click="$goUrl(`/pages/forSale/pages/select`)">筛选</view> -->
      </view>
    </van-sticky>
    <view class="list">
      <view class="user-box" @click.stop="goToDeskChange(item)" v-for="(item, index) in getTrendsPageData" :key="index">
        <view class="dispaly-just-between">
          <view class="user-left dispaly-line-center">
            <view class="user-avatar">
              <!-- @click.stop="
              $goUrl(`/pages/index/pages/businessCard?id=${item?.createUser}&moreId=${item?.id}`)
              " -->
              <image :src="item?.avatar" mode="aspectFill" />
            </view>
            <view class="user-info-box">
              <view class="user-info-top dispaly-center">
                <view class="name">{{ item?.nickName }}</view>
                <view class="job-name">{{ item?.company }}</view>
                <view class="vip" v-if="item?.isVip == 1">
                  <image src="/static/icon/vip.svg" mode="widthFix" />
                </view>
                <view class="top dispaly-align-center" v-if="item?.isOverhead != 0">置顶</view>
              </view>
              <view class="time">{{ item?.createTime }}</view>
            </view>
          </view>
          <view class="btn dispaly-align-center" @click.stop="
            $goUrl(
              `/pages/index/pages/businessCard?id=${item?.createUser}&trendsId=${item?.id}`
            )
            ">联系他</view>
        </view>
        <view class="con">
          <view class="content" v-html="item?.content"></view>
          <!--            <view ></view>-->
          <!--            <rich-text :nodes="item?.content"></rich-text>-->

          <view class="c-cover">
            <image :src="item?.images.split(',')[0]" mode="aspectFill" />
          </view>
        </view>
        <view class="option dispaly-just-between">
          <view class="dispaly-center op-left">
            <view class="top dispaly-align-center" v-if="item?.isOverhead == 1">置顶</view>
            <view class="l-per">{{ item?.callNum || 0 }}人已联系</view>
          </view>
          <view class="option-box dispaly-just-between">
            <view class="option-item dispaly-center">
              <view class="icon">
                <image src="/static/icon/msg.svg" mode="widthFix" />
              </view>
              <view class="icon-number">{{ item?.comment || 0 }}</view>
            </view>
            <view class="option-item dispaly-center">
              <view class="icon">
                <image src="/static/icon/star.svg" mode="widthFix" />
              </view>
              <view class="icon-number">{{ item?.likes || 0 }}</view>
            </view>
            <view class="option-item dispaly-center" @click.stop.prevent="deleteChangeMessage(item)"
              v-if="item.createUser == getUser?.userId">
              <view class="icon">
                <image src="/static/icon/delete.svg" mode="widthFix" />
              </view>
              <view class="icon-number">删除</view>
            </view>
          </view>
        </view>
      </view>
      <LoadMore />
    </view>
  </view>

  <view class="carete-circle" @click="$goUrl(`/pages/forSale/pages/top`)">
    <view class="circle-w dispaly-align-center">
      <view class="circle-n dispaly-align-center">
        <view>
          <view class="circle-text">置顶</view>
        </view>
      </view>
    </view>
  </view>

  <view class="carete-circle act" @click="goToChange">
    <view class="circle-w dispaly-align-center">
      <view class="circle-n dispaly-align-center">
        <view>
          <view class="circle-text">发布</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import {
  getTrendsPage,
  getWriteFillList,
  deleteMyTrends,
  contact,
  getUserInfo,
} from "@/api/apiList";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { deleteObjectEmptyKey } from "@/utils/util";

const tabList = ref([]);
// 点击tab
const current = ref(0);
const tabChange = (data) => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  current.value = data.index;
  console.log(data, "data");

  query.subtype = data.data.dictCode;
  uni.setStorageSync("currentIndex", data);
  getTrendsPageChange();
};

const tabBg = ref("transparent");
onPageScroll((res) => {
  const { scrollTop } = res;
  tabBg.value = scrollTop >= 60 ? "#fff" : "transparent";
});
const isUserId = ref(uni.getStorageSync("userInfo")?.data?.userId ? 1 : 0);
const query = reactive({
  pageSize: 1000000,
  pageNum: 1,
  source: 1,
  subtype: "",
  search: "",
  industryId: "",
  isUserId: isUserId.value,
});

const getTrendsPageData = ref([]);
const status = ref("noMore");
const getTrendsPageChange = async () => {
  const newQuery = deleteObjectEmptyKey(query);
  const response = await getTrendsPage(newQuery);
  status.value = "loading";
  if (response && response?.code == 200) {
    if (response.rows.length) {
      getTrendsPageData.value = [...getTrendsPageData.value, ...response.rows];
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

// 搜索
const search = () => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange();
};

// 上一页带回的数据
const getPreviousPageType = () => {
  uni.$on("getType", (data) => {
    if (data) {
      query.pageNum = 1;
      getTrendsPageData.value = [];
      query.industryId = data.data.id;
      getTrendsPageChange();
      console.log(data, "formData.value");
    }
  });
};

const getWriteFillListData = async () => {
  const res = await getWriteFillList("/trends_sub_type");
  if (res.code == 200) {
    tabList.value = res.data;
    // for (let index = 0; index < 10; index++) {
    //   tabList.value.push({
    //     dictLabel: '你好'
    //   })
    // }
    query.subtype = tabList.value[0].dictCode;
  }
};

onShow(async () => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  await getTrendsPageChange();
  await getWriteFillListData();
  getUserInfoChange();
  if (uni.getStorageSync("currentIndex")) {
    tabChange({
      index: uni.getStorageSync("currentIndex").index,
      data: uni.getStorageSync("currentIndex").data,
    });
    current.value = uni.getStorageSync("currentIndex").index;
    console.log(current.value);
  }
});
// onLoad(async () => {
//   getPreviousPageType()

// })
const getUser = ref();
const getUserInfoChange = async () => {
  const response = await getUserInfo();
  if (response && response.code == 200) {
    getUser.value = response.data;
  }
};

onReachBottom(() => {
  query.pageNum++;
  getTrendsPageChange();
});

onPullDownRefresh(() => {
  uni.showLoading({
    title: "加载中",
  });
  query.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange();
  uni.hideLoading();
  uni.stopPullDownRefresh();
});

const deleteChangeMessage = (s) => {
  uni.showModal({
    title: "删除帖子",
    content: "您确定要删除这个帖子吗",
    success: async (res) => {
      if (res.confirm) {
        const response = await deleteMyTrends(s.id);
        if (response.code == 200 && response) {
          getTrendsPageChange();
          uni.showToast({
            title: "删除帖子成功",
            icon: "none",
          });
        }
      }
    },
  });
};

const goToDeskChange = async (item) => {
  //console.log(11111111111);
  //return false;
  uni.navigateTo({
    url: `/pages/index/pages/forDetail?id=${item?.id}&type=${current.value}`,
  });
  await contact({ id: item.id });
};

const goToChange = () => {
  uni.navigateTo({
    url: `/pages/forSale/pages/submitForSale?source=1&type=2`,
  });
  uni.setStorageSync("currentIndex", "");
};
</script>

<style lang="scss" scoped>
:deep(.van-search__content--round) {
  background-color: #fff;
}

:deep(.van-search) {
  padding-bottom: 0;
}

.tab {
  padding: 30rpx;
}

.act {
  bottom: 260rpx !important;
}

.carete-circle {
  position: fixed;
  right: 20rpx;
  bottom: 122rpx;

  .circle-w {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    border: 4rpx solid #111111;
    border-radius: 50%;

    .circle-n {
      background-color: #0753fd;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50rpx;

      .circle-text {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}

.list {
  margin-top: 44rpx;
}

.user-box:last-child {
  margin-bottom: 0;
}

.user-box {
  margin-bottom: 20rpx;
  padding: 28rpx;
  background-color: #fff;
  border-radius: 16rpx;

  .con {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    .content {
      font-family: PingFang SC Regular;
      font-size: 26rpx;
      color: #111111;
      height: 200rpx;
      display: -webkit-box;
      /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-box-orient: vertical;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 6;
      /* 限制在一个块元素显示的文本的行数 */
      overflow: hidden;
      /* 隐藏超出的内容 */
      width: calc(100% - 260rpx);
    }

    .c-cover {
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
      }
    }
  }

  .user-left {
    .user-avatar {
      margin-right: 20rpx;
      position: relative;

      image {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
      }
    }

    .qz {
      position: absolute;
      bottom: -15rpx;
      text-align: center;
      font-family: PingFang SC Medium;
      font-size: 22rpx;
      color: #ffffff;
      background-color: #004fff;
      width: 60rpx;
      height: 30rpx;
      text-align: center;
      border-radius: 10rpx;
      left: 50%; //起始是在body中，横向距左50%的位置
      transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
    }
  }

  .user-info-box {
    .user-info-top {
      margin-bottom: 20rpx;
      margin-top: 8rpx;

      .name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #111111;
      }

      .job-name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #999999;
      }

      .vip {
        margin-left: 15rpx;

        image {
          width: 70rpx;
          height: 28rpx;
        }
      }
    }

    .time {
      font-family: PingFang SC Regular;
      font-size: 22rpx;
      font-weight: normal;
      color: #777777;
    }
  }

  .top {
    font-family: PingFang SC Medium;
    font-size: 24rpx;
    font-weight: normal;
    color: #8c5b3f;
    padding: 5rpx 8rpx;
    background-color: #efd0a5;
    border-radius: 8rpx;
    margin-left: 15rpx;
  }
}

.btn {
  border-radius: 8rpx;
  box-sizing: border-box;
  border: 1rpx solid #0753fd;
  font-family: PingFang SC Regular;
  font-size: 22rpx;
  font-weight: normal;
  color: #004fff;
  padding: 5rpx 10rpx;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26rpx;

  .l-per {
    margin-left: 14rpx;
    font-family: PingFang SC Regular;
    font-size: 24rpx;
    color: #999999;
  }

  .option-box {
    .option-item {
      margin: 0 20rpx;

      .icon {
        margin-right: 22rpx;

        image {
          width: 32rpx;
          height: 31rpx;
        }
      }

      .icon-number {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        color: #111111;
      }
    }
  }
}
</style>
